<template>
  <div id="userCenter">
    <CommonHeader :header="Header"></CommonHeader>
    <div class="usertop">
      <br> <br>
      <div class="set1">
        <div class="userhead">
          <img src="../../assets/img/5.jpg">
          <p v-if="Name">{{user.userName}}</p>
        </div>
      </div>

      <div class="userqq" v-if="!showname">
        <mt-button type="danger" size='small' v-on:click="userEnroll">注册/登陆</mt-button>
      </div>
    </div>
    <div class="userup">
      <mt-cell title="学生认证" to="/renzheng" v-if="!shownam">
        <span>></span>
        <img slot="icon" src='../../assets/img/ZHANGHAO.png' width="24" height="24">
      </mt-cell>
      <mt-cell title="关于我们" to="/guanyuwomen">
        <span>></span>
        <img slot="icon" src='../../assets/img/WOMEN.png' width="24" height="24">
      </mt-cell>
      <mt-cell title="我的收藏" to="/collections" v-if="!shownam">
        <span>></span>
        <img slot="icon" src='../../assets/img/SHOUCANG.png' width="24" height="24">
      </mt-cell>
      <mt-cell title="我的发布" to="/xiaoxi" v-if="!shownam">
        <span>></span>
        <img slot="icon" src='../../assets/img/XIAOXI.png' width="24" height="24">
      </mt-cell>
      <mt-cell title="个人信息" to="/stuMsg" v-if="!shownam">
        <span>></span>
        <img slot="icon" src='../../assets/img/SHEZHI.png' width="24" height="24">
      </mt-cell>

      <hr>
      <div class="userui" v-if="!shownam">
        <mt-button type="primary" size='large' @click="CHU">退出登陆</mt-button>
      </div>

    </div>
    <!-- 底部Nav -->
    <Tab :tab1="homeTab1" :tab2="homeTab2" :tab3="homeTab3" :tab4="homeTab4"></Tab>
  </div>
</template>
<script>
  import MemberCenterProvider from "@/providers/MemberCenterProvider";
  import { Toast } from 'mint-ui';
  import CommonHeader from "../../components/Header/CommonHeader.vue";
  import Tab from "@/components/Tab/Tab.vue";
  import { Cell } from "mint-ui";
  import axios from "axios";
  export default {
    name: "userCenter",
    data() {
      return {
        Header: "个人中心",
        homeTab1: "首页",
        homeTab2: "发现",
        homeTab3: "排行榜",
        homeTab4: "中心",
        user: "",
        showname: false,
        shownam: true,
        Name:false
      };
    },
    components: {
      CommonHeader,
      Tab
    },
    methods: {
      userEnroll() {
        this.$router.push("/userEnroll");
      },
      CHU() {
        MemberCenterProvider.layout().then(res => {
          console.log(res)
          Toast('退出成功')
          this.shownam = true;
          this.showname =false;
          this.Name =false

        })
      }

    },

    created() {
      axios.get("/api/user/layin")
        .then(res => {
          this.user = res.data;
          if(this.user){
            this.shownam =false;
            this.showname = true;
            this.Name =true
          }
        })
    },
    
  };

</script>

<style scoped>
  .usertop {
    /* border:1px solid red; */
    width: 100%;
    height: 200px;
    margin-top: 40px;
    margin-bottom: 10px;
    background: url("../../assets/img/2.jpg");
    background-size: 100% 200px;
  }

  .userhead {
    height: 80px;
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .userqq {
    margin-top: -20px;
    text-align: center;
  }

  .userhead>img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-top: -40px;
  }

  .userhead>p {
    color: white;
    margin-top: 8px;
  }

  .set {
    margin-left: 90%;
    padding-top: 10px;
  }

  .set1 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 27px;
  }
  .userui{
    margin-bottom: 50px
  }
</style>